<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>压力分析</title>
    <style>
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
        border: none;
    }
    </style>
</head>
<body class="fixed-navbar fixed-sidebar">

<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>压力分析</span>
                    </li>
                </ol>
            </div>

            <h2 class="font-light m-b-xs">
                压力分析
            </h2>
        </div>
    </div>
</div>

<div class="content animate-panel">
    <div class="row">
        <g:form method="POST" action="stressAnalyze" class="form-horizontal" role="form" id="form">
            <div class="hpanel hblue">
                <div class="panel-heading">
                    <div class="panel-tools">
                        <button class="btn btn-primary btn-xs" type="submit" id="search">
                            压力测试
                        </button>
                    </div>
                    &nbsp;
                </div>
                <div class="panel-body seach-group" id="">
                    <div class="row">
                        <div class="form-group col-sm-4">
                            <label class="col-sm-3 control-label">城市</label>
                            <div class="col-sm-9 input-group" style="display: flex;justify-content: center">
                                <g:select class="form-control" name="city" id="city" from="${com.cindata.City.findAllByNameInList(new com.cindata.ComponentService().evaluate(com.cindata.Component.findByCode('showCity')), [sort: 'name', order: 'asc'])}"
                                          valueMessagePrefix="status" optionKey="zoneNumber" optionValue="name"
                                          value="${params?.city}"/>
                            </div>
                        </div>
                        <div class="form-group col-sm-4">
                            <label class="col-sm-3 control-label">价值波动</label>
                            <div class="col-sm-9 input-group" style="display: flex;justify-content: center">
                                <g:select class="form-control" name="priceFluctuationsRatio" id="priceFluctuationsRatio"
                                          from="${[[name:'贬值5%',value:-0.05], [name:'贬值10%',value:-0.1], [name:'贬值15%',value:-0.15], [name:'贬值20%',value:-0.2], [name:'贬值30%',value:-0.3], [name:'增值5%',value:0.05], [name:'增值10%',value:0.1], [name:'增值15%',value:0.15], [name:'增值20%',value:0.2], [name:'增值30%',value:0.3]]}"
                                          optionKey="value" optionValue="name"
                                          value="${params?.priceFluctuationsRatio}"
                                          noSelection="${["": '请选择']}"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">

                        <div class="content animate-panel p-b-n">
                            <div class="row">
                                <div class="col-xs-7 p-n">
                                    <label class="control-label" style="padding-left: 10px;">${params?.cityName}各区县涨跌趋势</label>
                                    <div class="col-md-12">
                                        <div id="myMap1"></div>
                                    </div>
                                </div>
                                <div class="col-xs-5 p-n">
                                    <label class="control-label">${params?.cityName}各区县涨跌TOP10</label>
                                    <div class="table-responsive">
                                        <table class="table text-left" id="table1">
                                            <thead>
                                            <tr>
                                                <td>TOP10</td>
                                                <td>区域</td>
                                                <td>均价(元/m2)</td>
                                                <td>降幅</td>
                                            </tr>
                                            </thead>

                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </g:form>
    </div>

    <div class="row">
        <div class="hpanel hgreen">
            <div class="hpanel hblue">
                <div class="panel-heading">
                    <div class="panel-tools">

                    </div>
                    资产跌破指数
                </div>
            </div>
            <div class="panel-body no-padding">
                %{--<div class="col-md-4">--}%
                    %{--${params?.cityName}--}%
                %{--</div>--}%
                <div class="col-md-10" style="padding: 40px;">
                    <label class="control-label">${params?.cityName}区县价格指数</label>
                    <g:each in="${com.cindata.District.findAllByParentArea(com.cindata.City.findByZoneNumber(params?.city))}">
                        <input type="checkbox" class="i-checks allCheckbox1" name="everyCheckbox" value="${it?.id}">   ${it?.name}
                    </g:each>
                </div>
                <div class="clearfix"></div>
                <label class="m-t-md text-center" style="width: 100%;">
                    当前价格：<span class="text-danger" id="totalCurrentUnitPrice"></span>
                    资产负值量：<span class="text-danger" id="totalAssetsBelowCount"></span>
                    逾期总量：<span class="text-danger" id="totalOverdueCount"></span>
                </label>
                <div id="helloc" class="text-center" style="width: 100%; height: 400px; margin: 0 auto;"></div>
            </div>
        </div>

    </div>
</div>

<input type="hidden" id="zoneNumber" value="-1"/>
<input type="hidden" id="province" value="-1"/>

<asset:javascript src="echarts/echarts-all-3.js" />
<asset:javascript src="main/main_stressAnalyze.js" />

<script type="text/javascript">
    function initChats() {
        var districts = $("input:checkbox[name='everyCheckbox']:checked").map(function(index,elem) {
            return $(elem).val();
        }).get().join(',');
        var city = $("#city").val();
        $.ajax({
            type: "POST",
            url: "/assessAnalyze/assetsBelowData",
            data: {
                city: city,
                districts:districts
            },
            success:function (data) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('helloc'));
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        // formatter:'{b0}<br/>数量：{c0}</br> 贷款金额：{c1} 亿元</br>贷款余额:  {c2} 亿元<br />'
                        formatter: function(params) {
                            var res = '<div>';
                            res += '<strong>' + params[0].name + '</strong>'
                            for (var i = 0, l = params.length; i < l; i++) {
                                if (params[i].seriesName == '均价') {
                                    res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 元/㎡'
                                }
                                if (params[i].seriesName == '负值资产量') {
                                    res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 笔'
                                }
                                if (params[i].seriesName == '逾期总量') {
                                    res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 笔'
                                }
                            }
                            res += '</div>';
                            return res;
                        }
                    },
                    legend: {
                        // selectedMode:false,
                        data:['均价','负值资产量','逾期总量'],
                        textStyle:{ color: "#ADADAD"},
                        bottom:'bottom'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                interval: 0,
                                rotate: 0
                            },
                            data: [],
                            axisLine:{
                                lineStyle:{
                                    color:'#ADADAD',
                                }
                            },
                            // axisPointer: {
                            //     type: 'shadow'
                            // }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '均价(元/㎡)',
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#ADADAD',
                                }
                            },
                        },

                        {
                            type: 'value',
                            name: '数量(笔)',
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#ADADAD',
                                }
                            },
                        }
                    ],
                    series: [
                        {
                            name:'均价',
                            type:'bar',
                            barWidth : 50,
                            data:[]
                        },
                        {
                            name:'负值资产量',
                            type:'line',
                            yAxisIndex: 1,
                            symbol:'triangle',
                            symbolSize: 16,//拐点大小
                            data:[]
                        },
                        {
                            name:'逾期总量',
                            type:'line',
                            yAxisIndex: 1,
                            symbolSize: 8,//拐点大小
                            data:[]
                        }
                    ]
                };
                myChart.setOption(option);
                window.onresize = function () {
                    myChart.resize()
                };
                if(data.status == 'success'){
//返回数据处理
                    var priceResult = data.resultList['priceResult'];
                    var assetsBelowResult = data.resultList['assetsBelowResult'];
                    var overdueResult = data.resultList['overdueResult'];
                    var xData = [];
                    var priceList = [];
                    var assetsBelowList = [];
                    var overdueList = [];
                    var totalCurrentUnitPrice = 0;
                    var totalAssetsBelowCount = 0;
                    var totalOverdueCount = 0;
                    priceResult.forEach(function (data,index) {
                        priceList[index] = data["currentunitprice"].toFixed(2);
                        totalCurrentUnitPrice += data["currentunitprice"];
                        xData[index] = data["cityname"];
                    }) ;
                    if(priceResult.length>0){
                        totalCurrentUnitPrice = totalCurrentUnitPrice/priceResult.length;
                    }
                    assetsBelowResult.forEach(function (data,index) {
                        assetsBelowList[index] = data["assetsbelowcount"];
                        totalAssetsBelowCount += data["assetsbelowcount"];
                    }) ;
                    overdueResult.forEach(function (data,index) {
                        overdueList[index] = data["overduecount"];
                        totalOverdueCount += data["overduecount"];
                    }) ;
                    $("#totalCurrentUnitPrice").text(totalCurrentUnitPrice.toFixed(2)+'元/㎡');
                    $("#totalAssetsBelowCount").text(totalAssetsBelowCount+'笔');
                    $("#totalOverdueCount").text(totalOverdueCount+'笔');
                    option.xAxis[0].data=xData;
                    option.series[0].data=priceList;
                    option.series[1].data=assetsBelowList;
                    option.series[2].data=overdueList;
                    myChart.setOption(option);
                    window.onresize = function () {
                        myChart.resize()
                    };

                }
            }
        })
    }
    initChats();
    //多选框选择事件
    $("input[name='everyCheckbox']").on('ifChanged', function(event){
        initChats();
    });
</script>

</body>
</html>
